/*
 *1.创建对象 
 */
var detail = {
	// 初始化
	init: function(){
		var id = common.getUrlParam('id');
		console.log('id是',id);
		this.bindevent();
		this.getDetail(id);
	},
	// 绑定事件
	bindevent: function(){
		// 绑定事件的立即购买事件
		$('.buy').on('click',function(){
			detail.buyNow();
		})
		$('.addcar').on('click',function(){
			detail.addCar();
		})
	},
	// 渲染页面
	render: function(data){
		console.log(data);
//		// 图片
//		$('#phone-img').attr('src', data.imgUrl);
//		// 商品名称
//		$('#prdname').text(data.prdName);
//		// 商品描述
//		$('#disc').text(data.disc);
//		// 商品价格
//		$('#prdPrice').text(data.price);
//		// 发货地址
//		$('#address').text(data.address);
//		// 手机内存
//		$('#capacity').text(data.capacity);
//		// 手机库存
//		$('#stock').text(data.stock);
//	
		var htmlStr =`<div class="img-box">
							<img id="phone-img" src="${data.imgUrl}" alt="图片加载中...">
						</div>
						<div class="detail" id="detail">
							<p class="prdname"><span id="prdName">${data.prdName}</span> <span id="disc"></span></p>
							<p class="price">价格 ¥ ${data.price.toFixed(2)} 包邮</p>
							<p class="send">配送至 ${data.address} 免运费 24小时内发货</p>
							<p class="prdcolor">机身颜色 红色 金色（全网通）玫瑰金（全网通）</p>
							<p class="prdstore">存储容量 ${data.capacity}g</p>
							<p class="prdstore">库存 剩余${data.stock}件</p>
										<p class="submit-box">
								<button class="buy">立即购买</button>
								<button class="addcar">加入购物车</button>
							</p>
						</div>`;
//						console.log(htmlStr);
			$('.main').html(htmlStr);
		},
	// 立即购买事件的处理函数
	buyNow: function(target){
		alert('购买成功')
	},
	// 加入购物车处理事件(监听器)
	addCar: function(){
		alert('老板，你好')
	},
	// 获取详情数据
	getDetail:function(id){
		
		var url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/getDetail';
		var data = {id: id};
		common.loadingBegin();
		$.ajax({
			type:'get',
			url:url,
			data:data,
			success:function(res){
				
				console.log(res.data);
				detail.render(res.data);
			}, 
			error: function(){
				alert('网络异常，请重新开始尝试')
			},
			// 所有事情都完成的回调
			complete: function() {
				common.loadingFinish();
			}
			
		});
		
	}
}
detail.init();
